import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import { CommonModal, useModal } from "@/views/components/CommonModal";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { Tabs, Alert, Button, Col, Form, Input, DatePicker, Modal, Radio, Row, Space, Progress, message } from "antd";
import { useCallback, useEffect, useState } from "react";
import Style from "../index.module.less";
import SelectShop from "@/views/components/SelectShop";
import { manuallySynchronizeStoreProducts } from "../../../service";
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD"; //  HH:mm:ss
/**导入更新商品  同步店铺商品 */
function ActionModal(props) {
	const { selectedRows, onCancel } = props;

	const [radioValue, setRadioValue] = useState(0); //0 跳过，不处理  1 全部更新
	const onRadioChange = e => {
		setRadioValue(e.target.value);
	};
	const [tabValue, setTabValue] = useState(2);
	const [syncType, setSyncType] = useState(2); //同步类型 1:编码同步,2:时间段同步,3:按照商品名称同步
	const onTabChange = key => {
		setTabValue(key);
		// 店铺
		if (key == 2) {
			setSyncType(key);
		} else {
			// 商品 默认一下
			setSyncType(1);
			form.setFieldValue("syncType", 1);
		}
	};
	const [isAuthTimeExpire, setIsAuthTimeExpire] = useState(false);
	const onChangeAll = (v, item) => {
		setIsAuthTimeExpire(false);
		if (item.authExpireTime) {
			if (new Date(item.authExpireTime * 1000) < new Date()) {
				setIsAuthTimeExpire(true);
				console.log("选中店铺授权超期", item.authExpireTime);
			}
		}
	};
	const [form] = Form.useForm();
	function handleOk() {
		form.validateFields().then(values => {
			const { ecStoreId, timeRange, code, goodName } = values;
			let startTime = null;
			let endTime = null;
			if (timeRange?.length) {
				startTime = timeRange[0]?.format(dateFormat);
				endTime = timeRange[1]?.format(dateFormat);
			}
			const updateType = radioValue;

			const data = {
				ecStoreId,
				startTime,
				endTime,
				updateType,
				syncType,
				code: (code || "").replace(/\r?\n/g, ",").replace(',,', ''),
				goodName: (goodName || "").replace(/\r?\n/g, ",")
			};
			// 店铺
			if (syncType == 2) {
				delete data.code;
				delete data.goodName;
			}
			// 按照编码同步
			if (syncType == 1) {
				delete data.endTime;
				delete data.startTime;
				delete data.goodName;
			}
			// 按照商品名称同步
			if (syncType == 3) {
				delete data.endTime;
				delete data.startTime;
				delete data.code;
			}

			if (isAuthTimeExpire) {
				message.warning("当前店铺授权过期");
				return;
			}
			// 调用接口
			manuallySynchronizeStoreProducts(data)
				.then(res => {
					const { success, data } = res;
					if (success) {
						onCancel();
						message.success("操作成功，稍后刷新页面查看");
					} else {
						message.warning("提交失败");
					}
				})
				.catch(err => {
					console.log(err);
				})
				.finally(() => {});
		});
	}
	const onValuesChange = values => {
		// console.log("onValuesChange", values);
		if (values.syncType) {
			setSyncType(values.syncType);
		}
	};

	// 	1、选择店铺：为单选项，数据来源于已授权的网店。（下拉项目前仅展示淘宝、京东、抖音、阿里巴巴、天猫供销、童品云仓），之后每支持一个平台的店铺，下拉项就需要放开展示的权限。

	// 2、店铺商品更新时间：时间筛选器精确至秒，默认时间限制在7天内

	// 3、确定：确定时，需要判断当前店铺是否正常授权状态。

	// 当前选择的店铺非正常授权状态时，全具提示“当前店铺授权失效”

	// 选项为空时，选择框下方红字提示“请选择”

	const StoreTab = (
		<Form form={form} onValuesChange={onValuesChange}>
			<Row gutter={16}>
				<Col span={9}>
					<Form.Item name="ecStoreId" rules={[{ required: true, message: "请选择" }]}>
						<SelectShop allowClear className="width-full" onChangeAll={onChangeAll} />
					</Form.Item>
				</Col>
				<Col span={15}>
					<Form.Item name="timeRange" rules={[{ required: true, message: "请选择" }]}>
						<RangePicker allowClear style={{ height: "32px" }} format={dateFormat} placeholder={["开始日期", "结束日期"]} />
					</Form.Item>
				</Col>
			</Row>
		</Form>
	);

	const GoodsTab = (
		<Form form={form} onValuesChange={onValuesChange}>
			<Row gutter={16}>
				<Col span={24}>
					<Form.Item name="ecStoreId" rules={[{ required: true, message: "请选择" }]}>
						<SelectShop allowClear className="width-full" onChangeAll={onChangeAll} />
					</Form.Item>
				</Col>

				<Col span={24}>
					<Form.Item name="syncType" rules={[{ required: true, message: "请选择" }]}>
						<Radio.Group>
							<Radio value={1}>按商品编码生成</Radio>
							<Radio value={3}>按商品名称生成</Radio>
						</Radio.Group>
					</Form.Item>
				</Col>

				<Col span={24}>
					{syncType == "1" && (
						<Form.Item name="code" rules={[{ required: true, message: "请输入" }]}>
							<Input.TextArea
								style={{ height: 120, backgroundColor: "rgb(244,247,255)", fontSize: "12px", lineHeight: "18px" }}
								placeholder="请输入网店商品ID或编码，普通网店比如淘宝、抖音等输入商品链接ID同步，最多20个；聚水潭的按照商品编码同步，最多100个，换行输入。如：&#10;4235646758578&#10;6755789609780&#10;6755789609780"
							/>
						</Form.Item>
					)}
					{syncType == "3" && (
						<Form.Item name="goodName" rules={[{ required: true, message: "请输入" }]}>
							<Input.TextArea
								style={{ height: 120, backgroundColor: "rgb(244,247,255)", fontSize: "12px", lineHeight: "18px" }}
								placeholder="最多输入4个商品名称关键词，换行输入。如：&#10;陈梦男装2019&#10;陈梦男装2019&#10;陈梦男装2019"
							/>
						</Form.Item>
					)}
				</Col>
			</Row>
		</Form>
	);

	return (
		<CommonModal
			title={{ title: "从店铺导入商品资料" }}
			open={true}
			width="528px"
			onCancel={onCancel}
			onOk={handleOk}
			okText="保存"
		>
			<Alert
				showIcon
				message={
					<Typography as="s1">
						1. 淘宝、京东、抖音、阿里巴巴、天猫供销支持按时间同步；
						<br />
						2. 最多同步7天内更新的商品。
					</Typography>
				}
				style={{ marginBottom: 16 }}
			/>
			<div>
				下载时，如果系统存在相同商品编码，则：
				<Radio.Group onChange={onRadioChange} value={radioValue} style={{ marginRight: -15 }}>
					<Radio value={0}>跳过，不处理</Radio>
					<Radio value={1}>全部更新</Radio>
				</Radio.Group>
			</div>

			<Tabs
				defaultActiveKey="2"
				onChange={onTabChange}
				items={[
					{
						label: `按店铺同步`,
						key: "2",
						children: tabValue == "2" ? StoreTab : <></>
					},
					{
						label: `按商品同步`,
						key: "1or3",
						children: tabValue == "1or3" ? GoodsTab : <></>
					}
				]}
			/>
		</CommonModal>
	);
}

export default ActionModal;
